<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <el-card>
      <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          v-show="showSearch"
          label-width="100px"
      >
        <el-form-item label="老人姓名" v-if="applyName">
          <el-input
              v-model="applyName"
              placeholder="请输入老人姓名"
              :disabled="true"
          />
        </el-form-item>
        <el-form-item label="设备型号">
          <el-input
              v-model="queryParams.deviceModel"
              placeholder="请输入设备型号"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备序列号">
          <el-input
              v-model="queryParams.imei"
              placeholder="请输入设备序列号"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备类型" v-if="applyName">
          <el-select
              v-model="queryParams.deviceTypeId"
              clearable
              placeholder="请选择设备类型"
              style="width: 240px"
          >
            <el-option
                v-for="dict in deviceList"
                :key="dict.id"
                :label="dict.typeName"
                :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" v-else>
          <el-select
              v-model="queryParams.typeId"
              clearable
              placeholder="请选择设备类型"
              style="width: 240px"
          >
            <el-option
                v-for="dict in deviceList"
                :key="dict.id"
                :label="dict.typeName"
                :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索
          </el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table
          v-loading="loading"
          :data="postList"
          stripe
          border
          max-height="500"
      >
        <el-table-column
            label="设备序列号"
            align="center"
            prop="imei"
            width="200"
        />
        <el-table-column
            label="设备型号"
            align="center"
            prop="deviceModel"
            width="200"
        />
        <el-table-column
            label="设备类型"
            align="center"
            prop="deviceType"
            v-if="applyId"
        />
        <el-table-column
            label="设备类型"
            align="center"
            prop="typeName"
            v-else
        />
        <el-table-column label="在线状态" align="center">
          <template #default="scope">
            <div
                v-if="scope.row.online === true"
                style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <img src="@/assets/img/zaixian.png" style="width: 25px"/>
              <span style="margin-left: 2px">在线</span>
            </div>
            <div
                v-else
                style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <img src="@/assets/img/lix.png" style="width: 25px"/><span
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
            >离线</span
            >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="设备电量" align="center">
          <template #default="scope">
            <batteryDisplay1
                :quantity="scope.row.remainingPower"
                v-if="scope.row.remainingPower >= 0"
            ></batteryDisplay1>
            <span v-else style="color: red">未知</span>
          </template>
        </el-table-column>
        <el-table-column
            label="最新数据时间"
            align="center"
            prop="remainingPowerUpdatedAt"
        />
        <el-table-column label="监测数据" align="center">
          <template #default="scope">
            <div
                v-for="item in scope.row.deviceGatherDataList"
                :key="item.id"
                style="display: inline-block"
            >
              <img
                  src="@/assets/img/gaojing.png"
                  style="width: 30px; margin-left: 10px"
                  v-if="item.gatherDataId == '0'"
              />
              <img
                  src="@/assets/img/jiankang.png"
                  style="width: 30px; margin-left: 10px"
                  v-if="item.gatherDataId == '1'"
              />
              <img
                  src="@/assets/img/jiankong.png"
                  style="width: 30px; margin-left: 10px"
                  v-if="item.gatherDataId == '3'"
              />
              <img
                  src="@/assets/img/shuimian.png"
                  style="width: 30px; margin-left: 10px"
                  v-if="item.gatherDataId == '2'"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
        >
          <!--          <template #default="scope">-->
          <!--            <el-button link type="primary" @click="handleInfo(scope.row)">查看</el-button>-->

          <!--          </template>-->
          <template #default="scope">
            <router-link
                :to="
                '/equipmentManagement/OperationMonitoring-info/info/' +
                scope.row.deviceModel +
                '/' +
                scope.row.imei
              "
                class="link-type"
            >
              <span>查看</span>
            </router-link>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.limit"
          @pagination="getList"
      />
    </el-card>

    <!-- 添加或修改岗位对话框 -->
  </div>
</template>

<script setup name="OperationMonitoring">
const {proxy} = getCurrentInstance();
import {useRouter, useRoute} from "vue-router";

const router = useRouter();
const route = useRoute();
import {
  deviceregList,
  devicetypeList,
  getDeviceBaseInfo,
} from "@/api/equipment";
import {getElderIntelligentMonitorList} from "@/api/safehome";
import batteryDisplay1 from "@/views/equipmentManagement/OperationMonitoring/BatteryDisplay1.vue";

const showSearch = ref(true);
const loading = ref(true);
const postList = ref([]);
const deviceList = ref([]);
const applyName = ref("");
const applyId = ref("");

const total = ref(0);

const data = reactive({
  form: {},
  queryParams: {
    page: 1,
    limit: 10,
    deviceModel: undefined,
    imei: undefined,
    typeId: undefined,
  },
});

const {queryParams, form, rules} = toRefs(data);

/** 查询岗位列表 */
async function getList() {
  loading.value = true;
  if (applyId.value) {
    let arr = [];
    const data = await getElderIntelligentMonitorList(queryParams.value);
    postList.value = data.monitorDeviceInfoList.list;
    total.value = data.monitorDeviceInfoList.totalCount;
    loading.value = false;
    for (let i of data.monitorDeviceInfoList.list) {
      const data1 = await getDeviceBaseInfo(i.deviceModel, i.imei);
      let obj = {
        online: data1.deviceBasicInfo.online,
        remainingPower: data1.deviceBasicInfo.remainingPower,
        remainingPowerUpdatedAt: data1.deviceBasicInfo.remainingPowerUpdatedAt,
      };
      i = {...i, ...obj};
      arr.push(i);
    }
    postList.value = arr;
  } else {
    let arr = [];
    const data = await deviceregList(queryParams.value);
    postList.value = data.page.list;
    total.value = data.page.totalCount;
    loading.value = false;

    for (let i of data.page.list) {
      const data1 = await getDeviceBaseInfo(i.deviceModel, i.imei);
      let obj = {
        online: data1.deviceBasicInfo.online,
        remainingPower: data1.deviceBasicInfo.remainingPower,
        remainingPowerUpdatedAt: data1.deviceBasicInfo.remainingPowerUpdatedAt,
      };
      i = {...i, ...obj};
      arr.push(i);
    }
    postList.value = arr;
  }
}

function handleQuery() {
  getList();
}

function getdevicetypeList() {
  let obj = {
    page: 1,
    limit: 999,
  };
  devicetypeList(obj).then((res) => {
    deviceList.value = res.page.list;
  });
}

const stopWatch = watch(
    () => route,
    (newVal, oldVal) => {
      if (newVal.query) {
        applyName.value = newVal.query.applyName;
        applyId.value = newVal.query.applyId;
        queryParams.value.homeBedApplyId = newVal.query.applyId;
      }
    },
    {immediate: true}
);

onBeforeUnmount(() => {
  stopWatch();
});

function resetQuery() {
  queryParams.value = {
    page: 1,
    limit: 10,
    deviceModel: undefined,
    imei: undefined,
    typeId: undefined,
    homeBedApplyId: queryParams.value.homeBedApplyId
  };
  getList();
}

getdevicetypeList();
getList();
</script>
